<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.title"
            placeholder="抬头"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.idNum"
            placeholder="识别号"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Select clearable
                style="width:100px;"
                v-model="search.status"
                :label-in-value="true"
                placeholder="请选择状态"
                class="select"
              >
             <Option value="0" label="待开票"></Option>
             <Option value="1" label="已开票"></Option>
            </Select>
         </div>

         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>


      <Modal
        v-model="diyDom.showModal"
        :title="diyData.status==1?'补开票':'开票'">
          <Form ref="addForm"  :model="form" :rules="diyData.rules"  :label-width="100">
            <FormItem label="抬头">
                 {{form.title}}
            </FormItem>  
            <FormItem label="纳税人识别号">
                 {{form.idNum}}
            </FormItem>  
            <FormItem label="开票地址">
            <div class="upload-Img">
              <template v-if="form.invoiceUrl" >
                <div v-if="form.invoiceUrl.includes('pdf')">
                  <a  @click.native="lookFile(index)" style="margin-right:10px">查看</a>
                  <span  @click.native="deleteFile(index)">删除</span>
                </div>
                 <div v-else class="look-img">
                  <img :src="form.invoiceUrl" style="width: 100%" />
                  <div class="demo-upload-list-cover">
                    <Icon
                      type="ios-eye-outline"
                      @click.native="lookFile(index)"
                    ></Icon>
                    <Icon
                      type="ios-trash-outline"
                      @click.native="deleteFile(index)"
                    ></Icon>
                  </div>
                </div>
              </template>
            <template v-else>
              <Upload
                :action="uploadUrl"
                :headers="headers"
                :on-error="uploadErr"
                :on-success="(value) => uploadSuccess('', value)"
                name="file"
                :show-upload-list="false"
              >
                <div class="upload-btn">
                  <Icon
                    type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"
                  ></Icon>
                  <p>点击上传发票</p>
                </div>
              </Upload>
            </template>
          </div>
            </FormItem>  
        </Form>
        <div slot="footer">
                <Button style="width: 90px" @click="modalCancel()">返回</Button>
                <Button type="primary" style="width: 90px; margin-left: 20px" @click="submit" >保存</Button>
            </div>
    </Modal>
    </div>

  </div>
</template>
<script>
import {apiinvoiceList,apiinvoiceUpload} from '@/api/invoice-manage.js'
export default {
  name: 'invoice-manage',
  data () {
    return {
       headers: {
        token: localStorage.getItem("token"),
      },
      uploadUrl: process.env.VUE_APP_API_URL + "/upload-file",
      search: {
        title:'',
        idNum:'',
        phone:'',
        status:'',
        pageNo: 1,
        pageSize: 10,
      },
      diyDom:{
        showModal:false
      },
      form:{
        title:'',
        idNum:'',
        invoiceUrl:'',
        id:'',
      },
      diyData: {
        status:'',
        orderNo:'',
        columns: [
          {
            title: '昵称',
            width:'150px',
            key:'nickname'
          },
           {
            title: '手机号',
            width:'150px',
            key: 'phone',
          },
          {
            title: '开票金额',
             width:'100px',
            key:'amount',
          },
          {
            title: '抬头/识别号',
            width:'250px',
            key:'amount',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.title),
                h('p', params.row.idNum),
              ])
             }
          },
          {
            title: '邮箱',
            width:'200px',
            key: 'email',
          },
          {
            title: '申请时间',
            width:'180px',
            key: 'createTime',
          },
          {
            title: '状态',
            width:'100px',
            key:'status',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.status==1?'已开票':'待开票'),
              ])
             }
          },
          {
            title: '开票时间',
            width:'180px',
            key: 'openTime',
          },

       
          {
          title: '操作',
          width:'150px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                    props: {
                      size: 'small',
                    },
                    style:{
                        marginRight:'10px',
                        fontSize:'14px',
                    },
                    on: {
                        click: () => {
                          this.diyDom.showModal=true
                          this.diyData.status=params.row.status
                          this.form.idNum=params.row.idNum
                          this.form.title=params.row.title
                          this.form.invoiceUrl=params.row.invoiceUrl
                          this.form.id=params.row.id
                          //   this.$Modal.confirm({
                          //     title: '提示',
                          //     content: `确认${params.row.status==1?'补开票':'开票'}<br>抬头:${params.row.title}<br>识别号：${params.row.idNum}<br>开票地址：${params.row.invoiceUrl}`,
                          //     onOk: () => {
                          //         apiinvoiceUpload({
                          //             id: params.row.id,
                          //             invoiceUrl: params.row.invoiceUrl
                          //         }).then(res => {
                          //             this.$Message.success('操作成功');
                          //             this.getTableList();
                          //         });
                          //     }
                          // });
                        }
                    },                            
                  },
                  params.row.status==1?'补开票':'开票'
                ),
                
            ])
          }
          },
        ]
      },
      apiData: {
        total: 0,
        infor:null,
        tableList: [{status:0,}], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      apiinvoiceList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    modalCancel(){
      this.diyDom.showModal=false
      this.form={
        title:'',
        idNum:'',
        invoiceUrl:'',
        id:'',
      }
    },
        uploadSuccess(type, res, index = 0) {
      if (res.code != 200) {
        return this.$Modal.error({ title: "提示", content: res.msg });
      }
      this.$Message.success("文件上传成功");
      this.form.invoiceUrl = res.data.fileUrl;
    },
    // 文件上传失败
    uploadErr() {
      this.$Spin.hide();
      this.$Modal.error({
        title: "提示",
        content: "文件上传失败，请重试",
      });
    },
    // 查看文件
    lookFile(index = 0, type) {
      let url = "";
      url = this.form.invoiceUrl;
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.target = "_blank";
      a.href = url;
      a.click();
      document.body.removeChild(a);
    },
    // 删除文件
    deleteFile(index = 0, type) {
      this.$Modal.confirm({
        title: "提示",
        content: "确认删除文件？",
        onOk: () => {
          this.form.invoiceUrl = "";
        },
      });
    },
    submit(){
              apiinvoiceUpload({
                  id: this.form.id,
                  invoiceUrl: this.form.invoiceUrl
              }).then(res => {
                  this.$Message.success('操作成功');
                  this.getTableList();
                  this.modalCancel()
              });
    },
  },
   mounted () {
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 